<template>
  <footer class="footer">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count"><strong>{{unDoneTodoLength}}</strong> item left</span>
    <!-- Remove this if you don't implement routing -->
    <ul class="filters" @click="$emit('switchTodo',type)">
      <li>
        <a href="#/" :class="{selected:type==='all'}" @click="type='all'">All</a>
      </li>
      <li>
        <a href="#/active" :class="{selected:type==='no'}" @click="type='no'">Active</a>
      </li>
      <li>
        <a href="#/completed" :class="{selected:type==='yes'}" @click="type='yes'">Completed</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button class="clear-completed" v-if="hasDoneTodo" @click="clear">Clear completed</button>
  </footer>
</template>

<script>
export default {
  props:['arr'],
  data(){
    return {
        type:'all',
    }
  },
  computed:{
    unDoneTodoLength(){
     return this.arr.filter(item=>item.isDone===false).length
    },
    //显示隐藏 清空完成按钮
    hasDoneTodo(){
    return  this.arr.some(item=>item.isDone===true)
    }
  },
  methods:{
    clear(){
      if(confirm('确定要删除吗?')){
         this.$emit('clearTodo')
      }
    }
  }
};
</script>

<style>
</style>